<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">    
</head>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
<style>
    .swiper {
    width: 600px;
    height: 300px;
}  
.swiper2{
    width: 790px;
    height: 300px;
} 

</style>
<body>
    <div class="swiper swiper1">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-color: aqua;">Slide 1</div>
            <div class="swiper-slide" style="background-color: springgreen;">Slide 2</div>
            <div class="swiper-slide" style="background-color: gold;">Slide 3</div>
            <div class="swiper-slide" style="background-color: orange;">Slide 4</div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <div class="swiper swiper2">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image: url(./imgs/img1.jpg);background-size: contain;"></div>
            <div class="swiper-slide" style="background-image: url(./imgs/img2.jpg);background-size: contain;"></div>
            <div class="swiper-slide" style="background-image: url(./imgs/img3.jpg);background-size: contain;"></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    

    
    <script>        
        var mySwiper = new Swiper ('.swiper1', {
            //自动播放效果 在swiper的菜单目录的API文档中获取  autoplay内有代码粘贴到这里就能使用
            autoplay:true,//等同于以下设置
  /*autoplay: {
    delay: 3000,
    stopOnLastSlide: false,
    disableOnInteraction: true,
    },*/
          direction: 'vertical', // 垂直切换选项
          loop: true, // 循环模式选项
          
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          
          // 如果需要滚动条
          scrollbar: {
            el: '.swiper-scrollbar',
          },
        })        
        var mySwiper2 = new Swiper ('.swiper2', {
            autoplay:true,
            
          direction: 'vertical', // 垂直切换选项
          loop: true, // 循环模式选项
          
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          
          // 如果需要滚动条
          scrollbar: {
            el: '.swiper-scrollbar',
          },
        })        
               </script>
</body>
</html>